<template>
  <!--上传评阅成绩-->
  <div class="result-release">
    <div class="edu-page-warp">
      <condition-card @reset="reset" @search="searchList" label-width="110px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="毕业年份">
              <el-date-picker class="search-item" :clearable="false" v-model="queryForm.graduationYear"
                              @change="handleGradeChange" value-format="yyyy" type="year"
                              placeholder="请选择">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行政学院">
              <el-select v-model="queryForm.collegeId" filterable @change="handleCollegeChange"
                         class="search-item" clearable>
                <el-option v-for="item in source.studentColleges" :key="item.collegeId"
                           :label="item.collegeIdI18n" :value="item.collegeId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业">
              <el-select v-model="queryForm.subjectId" filterable class="search-item" clearable>
                <el-option v-for="item in source.subjectOptions" :key="item.subjectId"
                           :label="item.subjectName" :value="item.subjectId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="课题名称">
              <el-input v-model="queryForm.projectName" placeholder="请输入" class="search-item"
                        clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </condition-card>
      <el-card shadow="never">
        <div class="edu-page-title">上传评阅信息</div>
        <div class="edu-opertion-bar">
          <div class="float-left">
            <el-input v-model="queryForm.studentName" placeholder="请输入学生姓名、学号搜索" style="width:300px"
                      @keyup.enter.native="searchList" clearable>
              <i slot="suffix" class="el-icon-search" style="margin-top:10px;cursor:pointer"
                 @click="searchList"></i>
            </el-input>
          </div>
          <div class="float-right">
            <el-button @click="onExport" v-loading.fullscreen.lock="loading"
                       element-loading-text="Loading" element-loading-spinner="el-icon-loading"
                       element-loading-background="rgba(255, 255, 255, .48)">导出
            </el-button>
          </div>
        </div>
        <edu-table ref="resultReleaseTable" :url="getList" @selection-change="handleSelectChange">
          <edu-table-column label="毕业年份" prop="graduationYear" min-width="80"></edu-table-column>
          <edu-table-column label="课题名称" prop="projectName" min-width="100"></edu-table-column>
          <edu-table-column label="行政学院" prop="collegeIdI18n" min-width="100"></edu-table-column>
          <edu-table-column label="专业" prop="subjectIdI18n" min-width="90"></edu-table-column>
          <edu-table-column label="方向" prop="direction" min-width="80"></edu-table-column>
          <edu-table-column label="学生姓名" prop="studentName" min-width="90"></edu-table-column>
          <edu-table-column label="指导老师" prop="teacherName" min-width="80"></edu-table-column>
          <edu-table-column label="评审状态" min-width="80">
            <template slot-scope="scope">
              <el-tag type="success" v-if="checkResult(scope.row.reviewResult)">已录入</el-tag>
              <el-tag type="info" v-if="!checkResult(scope.row.reviewResult)">待录入</el-tag>
            </template>
          </edu-table-column>
          <edu-table-column label="操作" min-width="80">
            <template slot-scope="scope">
              <el-button v-if="checkResult(scope.row.reviewResult)" type="text"
                         @click="viewInfo(scope.row)">查看
              </el-button>
              <el-button v-if="!checkResult(scope.row.reviewResult)" type="text"
                         @click="inputResult(scope.row)">
                录入
              </el-button>
            </template>
          </edu-table-column>
        </edu-table>
      </el-card>
    </div>
    <!--查看dialog-->
    <el-dialog :title.sync="dialogConfig.title" :visible.sync="dialogConfig.showDialog" width="45%">
      <el-form :model="dialogConfig.formData" :inline="true" ref="ruleForm"
               :rules="dialogConfig.rules">
        <el-row style="height: 50px;">
          <el-form-item label="课题名称：" :label-width="dialogConfig.formLabelWidth" prop="projectName">
            <el-input v-model="dialogConfig.formData.projectName" style="width:350px"
                      disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="指导老师：" :label-width="dialogConfig.formLabelWidth"
                        prop="teacherName">
            <el-input style="width:350px" v-model="dialogConfig.formData.teacherName"
                      disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="评阅成绩：" :label-width="dialogConfig.formLabelWidth"
                        prop="reviewResult">
            <el-select style="width:350px" v-model="dialogConfig.formData.reviewResult"
                       :disabled="dialogConfig.disabled" clearable>
              <el-option v-for="item in resultTypeOptions" :key="item.value" :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="论文原件：" :label-width="dialogConfig.formLabelWidth"
                        prop="dissertationPath">
            <el-button type="text" @click="downloadAttach(dialogConfig.formData.dissertationPath)">
              {{dialogConfig.formData.dissertationName}}
            </el-button>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="其它附件：" :label-width="dialogConfig.formLabelWidth" prop="attachPath">
            <el-button type="text" v-if="dialogConfig.formData.attachPath !== ''" @click="downloadAttach(dialogConfig.formData.attachPath)">
              {{dialogConfig.formData.attachName}}
            </el-button>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="评阅意见：" :label-width="dialogConfig.formLabelWidth"
                        prop="reviewOpinion">
            <el-input type="textarea" maxlength="500" style="width:350px;"
                      v-model="dialogConfig.formData.reviewOpinion"
                      :disabled="dialogConfig.disabled" placeholder="请输入（最多500字符）"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">返回</el-button>
          <el-button @click="submitForm" type="primary"
                     v-if="dialogConfig.showSubmit">提交</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
  import API from "common/src/api/underGraduationDesign/assignReviewers";
  import tools from 'common/src/views/underGraduationDesign/tools.js';
  export default {
    name: 'designResultRelease',
    data() {
      return {
        api: API,
        getList: '/api/designservice/reviewManage/queryReviewList?role=1',
        queryForm: {
          graduationYear: '',
          collegeId: '',
          subjectId: '',
          projectName: ''
        },
        source: {
          studentColleges: [], // 行政学院
          collegeOptions: [], // 学院
          subjectOptions: [] // 专业
        },
        resultSelectedData: [], // 勾选的列表数据
        selectStudentList: [],
        loading: false,
        resultTypeOptions: [{
          label: '优',
          value: 0
        }, {
          label: '良',
          value: 1
        }, {
          label: '中',
          value: 2
        }, {
          label: '及格',
          value: 3
        }, {
          label: '不及格',
          value: 4
        }],
        dialogConfig: {
          title: "评阅详情",
          showDialog: false,
          showSubmit: true,
          disabled: false,
          formLabelWidth: "150px",
          formData: {
            projectName: "",
            reviewerName: "",
            reviewResult: "",
            dissertationPath: "",
            reviewOpinion: "",
            attachPath: "",
            dissertationName: "",
            attachName: "",
            graduationYear: ''
          },
          rules: {
            reviewResult: [
              {required: true, message: '选择评阅成绩', trigger: 'blur'},
            ]
          }
        },
      };
    },
    mounted() {
      this.queryForm.graduationYear = new Date().getFullYear() + '';
      this.getCollege();
      this.queryForm.activeAuthId = localStorage.getItem("activeAuthId");
      this.searchList();
      tools.initAllCollege(this.source.studentColleges);
    },
    methods: {
      checkResult(result) {
        if (result == null || typeof (result) == "undefined") {
          return false
        }
        return true
      },
      submitForm() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.api.inputReviewResult(this.dialogConfig.formData).then(res => {
              if (res.code == 200) {
                this.closeDialog()
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
                this.searchList()
              }
            })
          } else {
            return false;
          }
        })
      },
      /*查看*/
      viewInfo(row) {
        this.dialogConfig.rules = {}
        this.dialogConfig.disabled = true
        this.dialogConfig.showSubmit = false
        this.dialogConfig.formData = row
        this.dialogConfig.showDialog = true
      },
      /*录入*/
      inputResult(row) {
        {
          reviewResult: [
            {required: true, message: '选择评阅成绩', trigger: 'blur'},
          ]
        }
        this.dialogConfig.disabled = false
        this.dialogConfig.showSubmit = true
        this.dialogConfig.formData = {...row}
        this.dialogConfig.showDialog = true
      },
      searchList() {
        this.$refs.resultReleaseTable.search(this.queryForm);
      },
      reset() {
        this.queryForm = {
          graduationYear: '',
          collegeId: '',
          subjectId: '',
          activeAuthId: '',
          teachingClassCode: ''
        };
        this.queryForm.activeAuthId = localStorage.getItem("activeAuthId");
        this.queryForm.graduationYear = new Date().getFullYear() + '';
        this.searchList();
      },
      handleSelectChange(val) {
        this.resultSelectedData = val;
      },
      // 毕业年份change
      handleGradeChange(val) {
        this.queryForm.subjectId = "";
        this.source.subjectOptions = [];
        if (val && this.queryForm.collegeId) {
          this.handleCollegeChange(this.queryForm.collegeId);
        }
      },
      closeDialog() {
        this.dialogConfig.showDialog = false;
      },
      // 查学院
      getCollege() {
        this.api.getCollege().then(res => {
          this.source.collegeOptions = res;
        });
      },
      // 根据年份学院查专业
      handleCollegeChange(val) {
        this.queryForm.subjectId = "";
        this.source.subjectOptions = [];
        if (val && this.queryForm.graduationYear) {
          const params = {
            grade: this.queryForm.graduationYear,
            college: val
          };
          this.api.getSubject(params).then(res => {
            this.source.subjectOptions = res.data;
          }).catch();
        }
      },
      // 查看
      onView(row) {
        this.dialogConfig.formData = row
        this.dialogConfig.showDialog = true
      },
      // 导出
      onExport() {
        const params = {
          condition: this.queryForm,
          selectList: this.resultSelectedData
        };
        this.api.export(params, 1).then(res => {
          if (res.code == 200) {
            // this.delayRequest(res.data.key);
            tools.downloadFile(res.data.key, "上传评阅成绩.xls", null, this);
          }
        });
      },
      // 查文件导出状态，等待导出
      async delayRequest(key) {
        this.loading = true;
        await new Promise(resolve => setTimeout(resolve, 3000));
        this.api.getExportStatus(key).then(res => {
          this.loading = false;
          if (res.code === 200 && res.data.status) {
            let path = 'api/designservice/common/export?path=' + res.data.path;
            window.open(path);
          } else {
            this.delayRequest(key);
          }
        }).catch(err => {
          this.loading = false;
          this.delayRequest(key);
        });
      },
      downloadAttach(path){
        // 导出
        let loading = this.$loading({
          lock: false,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(255, 255, 255, .48)"
        });
        window.open("/api/commonservice/obsfile/downloadfile?objectkey=" + path)
        loading.close()
      }
    }
  };
</script>
<style lang="scss" scoped>
  .result-release {
    .search-item {
      width: 100%;
    }
  }
</style>
